import React from 'react';

interface SupportCardGridProps<T, S> {
  cards: SupportFilterFields.BracketCardItem[];
  selectedRank?: T;
  setSelectedRank: (rank: T) => void;
  setSelectedBracket?: (bracket: S) => void;
}

// const thicknessOptions = [1.0, 1.27, 1.6];
// const rivetOptions = ['3号钉', '4号钉', '5号钉'];
// const bracketNames = ['支架A', '支架B', '支架C', '支架D', '支架E'];

// function generateMockCards(
//   count: number,
// ): SupportFilterFields.BracketCardItem[] {
//   const cards: SupportFilterFields.BracketCardItem[] = [];
//   for (let i = 1; i <= count; i++) {
//     cards.push({
//       rank: i,
//       thickness: thicknessOptions[i % thicknessOptions.length],
//       rivet: rivetOptions[i % rivetOptions.length],
//       l1: 20 + i * 2,
//       l2: 15 + i * 1.5,
//       image: `https://via.placeholder.com/150?text=Bracket+${i}`,
//       bracket: bracketNames[i % bracketNames.length],
//     });
//   }
//   return cards;
// }

const SupportCardGrid: React.FC<SupportCardGridProps<number, string>> = ({
  cards,
  selectedRank,
  setSelectedRank,
  setSelectedBracket,
}) => {
  return (
    <div className='flex-1 grid grid-cols-2 max-h-full overflow-auto gap-4'>
      {cards.map((item) => {
        const isSelected = item.rank === selectedRank;
        return (
          <div
            key={item.rank}
            onClick={() => {
              setSelectedRank(item.rank);
              setSelectedBracket(item.bracket);
            }}
            className={`border p-2 h-64 rounded-2xl shadow text-sm cursor-pointer
              ${isSelected ? 'border-blue-500 border-2' : 'border-gray-300'}
            `}
          >
            <img
              src={`data:image/png;base64,${item.image}`}
              alt='支架图'
              className='w-full h-32 object-contain mb-2'
            />
            <div>厚度: {item.thickness}</div>
            <div>钉号: {item.rivet}</div>
            <div>L1: {item.l1}</div>
            <div>L2: {item.l2}</div>
          </div>
        );
      })}
    </div>
  );
};

export default SupportCardGrid;
